<template>
	<div class="list-detail">
		<ul>
			<li v-if="index==0" v-for="list in lists" class="list" :class="index==0?'unfinish':'unfinish'">
				<router-link :to="{path:''}" @click.native="init">
					<span class="list-title">抄表</span>
					<div class="list-bd">
						<p>
							<span>抄表册名称</span>
							<span>{{list.count}}户</span>
						</p>
						<p>
							<span>{{list.name}}</span>
							<span>{{list.time}}</span>
						</p>
					</div>
				</router-link>
			</li>
			<li v-else-if="index==1" >
				<router-link :to="{path:'/user'}" @click.native="init">
					<div class="firstDiv">
						<p style="background-color: cornflowerblue;">账册统计</p>
						<p style="background-color: darkgreen;">在用</p>
						<p style="background-color: burlywood;">未开栓</p>
						<p style="background-color: gray;">停用</p>
					</div>
					<div class="secondDiv">
						<p class="statep">处<br/>理<br/>中</p>
						<div>
							<p>抄表册编号|抄表册名称</p>
							<p>100户/60户</p>
							<p>第一个用户地址</p>
							<p>2018-04-01 11:25</p>
						</div>

					</div>
				</router-link>
			</li>
			<li v-else>
				<router-link :to="{path:''}" @click.native="init">

				</router-link>
			</li>
		</ul>
		<loading :loadType="1"></loading>
	</div>
</template>

<script>
	import { sniff } from "@/utils/commonUtils";
	import loading from "@/components/common/loading";
	export default {
		data() {
			return {
				loading: false
			}
		},
		components: {
			loading,
		},
		props: ['lists', 'isRequested', "index"],
		mounted() {
			//this.init();
		},
		watch: {
			isRequested(val) {
				console.log(val)
			}
		},
		methods: {
			init() {
				console.log(sniff().ios)
				alert("即将跳转");
			},
		}
	}
</script>

<style scoped lang="less">
	@blue: #3280D1;
	.list-detail {
		.unfinish {
			margin-top: 0.4rem;
			a {
				display: flex;
				align-items: center;
				background: #fff;
				height: 1.6rem;
				.list-title {
					display: inline-block;
					width: 1.28rem;
					height: 1.28rem;
					line-height: 1.28rem;
					background: @blue;
					color: #fff;
					text-align: center;
					margin-left: 0.1333rem;
					border-radius: 0.1066rem;
				}
				.list-bd {
					margin-left: 0.2666rem;
					p {
						display: flex;
						justify-content: space-between;
						&:first-child {
							color: @blue;
							width: 6.6666rem;
						}
						&:last-child {
							width: 8rem;
							margin-top: 0.1333rem;
						}
					}
				}
			}
		}
		.firstDiv {
			display: flex;
			p {
				display: flex;
				flex: 1;
				justify-content: center;
				color: white;
			}
		}
		.secondDiv {
			display: flex;
			.statep {
				display: flex;
				align-items: center;
				margin-left: 0.2rem;
			}
			div{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				margin-left: 0.2rem;
				margin-top: 0.1333rem;
				p{
					flex: 50%;
				}
			}
			
			
		}
	}
</style>